<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户界面</title>
  <link rel="stylesheet" type="text/css" href="../static/all/css/AllUserPage.css" media="all">
  <link rel="stylesheet" type="text/css" href="../static/all/css/bootstrap.min.css" media="all" />
  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../static/all/css/btn.css" media="all" />
  <script src="/static/all/js/jquery.countdown.js"></script>
  <link href='/static/all/css/jquery.countdown.css'  rel="stylesheet" type="text/css"/>
  <script src="../static/all/js/jquery-1.11.1.min.js"></script>
  <script src="../static/all/js/bootstrap.min.js"></script>
  <style>
    .innerContent{
      background-color: white;
      border: 0px solid #000000;

      -moz-border-radius: 15px;

      -webkit-border-radius: 15px;

      border-radius:20px;
    }

    form>div{
      margin-left: 40px;
      margin-right: 40px;
    }

    .menu>li{
      list-style-type: none;
    }

    .part{
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <input type="checkbox" id="check" />
  <label for="check">
    <svg viewBox="0 0 30 30" width="30" height="30">
      <path id="one" d="M4 10h22M4" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>
      <path id="two" d="M4 20h22M4" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>
    </svg> 菜 单
  </label>
  <div th:replace="~{examChoose::nav}"></div>
  <article>
    <div class="wrapper">
      <!--<div class="content"></div>-->
      <div th:if="${mode} eq 1" class="time" style="margin-left: 500px">
        <ul>
          <li class="num"><span class="static old">0</span></li>
          <li class="num"><span class="static old">0</span></li>
          <li><span>:</span></li>
          <li class="num"><span class="static old">0</span></li>
          <li class="num"><span class="static old">0</span></li>
          <li><span>:</span></li>
          <li class="num"><span class="static old">1</span></li>
          <li class="num"><span class="static old">0</span></li>
        </ul>
      </div>

        <div class="container">
          <div  class="setting" style="display: none">
            时：<input type="text" name="" class="input hour" maxlength="2" value="00" />
            分：<input type="text" name="" class="input minute" maxlength="2" value="01" />
            秒：<input type="text" name="" class="input second" maxlength="2" value="00" />
            <a class="begin" onclick="Countdown.init()">开始</a>
          </div>



          <div class="row">
            <div class="col-sm-1"></div>
            <div class="col-md-3 innerContent">
              <table style="font-size: 20px" class="table table-condensed table-hover">
                <thead>
                <tr>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                </tr>
                </thead>
                <tbody>
                <tr class="listone" th:each="map : ${list1}">
                  <td th:text="${map.addone}"></td>
                  <td th:text="${map.operation}"></td>
                  <td th:text="${map.addtwo}"></td>
                  <td th:text="'='"></td>
                  <td ><input type="text" class="form-control"></td>
                </tr>
                </tbody>
              </table>
            </div>

            <div class="col-sm-1"></div>
          <div class="col-md-3 innerContent">
            <table style="font-size: 20px" class="table table-condensed table-hover">
              <thead>
              <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
              </tr>
              </thead>
              <tbody>
              <tr class="listtwo" th:each="map : ${list2}">
                <td th:text="${map.addone}"></td>
                <td th:text="${map.operation}"></td>
                <td th:text="${map.addtwo}"></td>
                <td th:text="'='"></td>
                <td ><input type="text" class="form-control"></td>
              </tr>
              </tbody>
            </table>
          </div>

            <div class="col-sm-1"></div>
            <div class="col-md-3 innerContent">
              <table style="font-size: 20px" class="table table-condensed table-hover">
                <thead>
                <tr>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                </tr>
                </thead>
                <tbody>
                <tr class="listthree" th:each="map : ${list3}">
                  <td th:text="${map.addone}"></td>
                  <td th:text="${map.operation}"></td>
                  <td th:text="${map.addtwo}"></td>
                  <td th:text="'='"></td>
                  <td ><input type="text" class="form-control"></td>
                </tr>
                </tbody>
              </table>
            </div>

            <div class="col-md-2" style="padding: 0">
          </div>
          </div>
        </div>
      <div class="footer" style="text-align: center">
        <button class="custom-btn btn-14" onclick="submitExam()">提交</button>
      </div>
    </div>
  </article>
</body>

<script th:inline="javascript">
  var mode = [[${mode}]];
  $(function () {
    console.log(mode);
    if (mode === 1){
      Countdown.init();
    }
  })
  
  function submitExam() {
    var formData = new FormData();

    console.log("进来了哦");

    $('.listone').each(function () {
      let num1 = $(this).children('td').eq(0).html();
      let num2 = $(this).children('td').eq(1).html();
      let num3 = $(this).children('td').eq(2).html();
      let num4 = $(this).children('td').eq(4).children('input').val();

      formData.append('numOne', num1);
      formData.append('numTwo', num2);
      formData.append('numThree', num3);
      formData.append('numFour', num4);

      console.log(num1);
      console.log(num2);
      console.log(num3);
      console.log(num4);
    })
    console.log("------------------------------");
    $('.listtwo').each(function () {
      let num1 = $(this).children('td').eq(0).html();
      let num2 = $(this).children('td').eq(1).html();
      let num3 = $(this).children('td').eq(2).html();
      let num4 = $(this).children('td').eq(4).children('input').val();

      console.log($(this).children('td').eq(4));
      console.log($(this).children('td').eq(4).children('input'));

      formData.append('numOne', num1);
      formData.append('numTwo', num2);
      formData.append('numThree', num3);
      formData.append('numFour', num4);

      console.log(num1);
      console.log(num2);
      console.log(num3);
      console.log(num4);
    })
    console.log("------------------------------");
    $('.listthree').each(function () {
      let num1 = $(this).children('td').eq(0).html();
      let num2 = $(this).children('td').eq(1).html();
      let num3 = $(this).children('td').eq(2).html();
      let num4 = $(this).children('td').eq(4).children('input').val();

      formData.append('numOne', num1);
      formData.append('numTwo', num2);
      formData.append('numThree', num3);
      formData.append('numFour', num4);

      /*console.log(num1);
      console.log(num2);
      console.log(num3);
      console.log(num4);*/
    })

    $.ajax({
      url: "/exam/uploadexam",
      type: 'post',
      data: formData,
      contentType: false,
      processData: false,
      success: function (result) {
        //console.log(result);
        document.write(result);
        return true;
      },
      error: function (result) {
        //console.log(result);
        alert("失败!");
        return false;
      }
    });
  }
  

</script>



</html>